import React, { memo, Component, Suspense } from 'react'
import { withRouter, Route, Switch } from 'react-router-dom'
import ConfessionCards from './confessionPages/confessionCards'
import CreateConfession from './confessionPages/createConfession'
import ConfessionDetail from './confessionPages/confessionDetail'
import { startSakura, stopp } from '../../utils/flower'
import { Spin, Alert, message } from 'antd'
import $ from 'jquery'
import './index.css'

class Confession extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      showContent: false, //黑板下拉延迟依赖状态
      pathname: props.history.location.pathname, //路由
    }
  }
  componentDidMount() {
    startSakura() //开启樱花特效
    setTimeout(() => {
      this.setState({
        showContent: true
      })
    }, 1400)
  }

  componentWillUnmount() {
    $('canvas').remove() // 删去樱花特效
  }
  render() {
    const { confessions, showContent, pathname } = this.state
    return (
      <Suspense
        fallback={
          <Spin tip="Loading...">
            <div style={{ height: 500 }}></div>
          </Spin>
        }
      >
        <Spin spinning={this.state.loading} size="large">
          <div className="blackboard">
            {/* <div className="scrollArea"  onScroll={(e)=>{console.log(e.target.scrollTop)}}> */}
              <Switch>
                <Route
                  exact
                  path="/home/schoolIndex/confession/confessionCards"
                  component={ConfessionCards}
                />
                <Route
                  exact
                  path="/home/schoolIndex/confession/createConfession"
                  component={CreateConfession}
                />
                <Route
                  exact
                  path="/home/schoolIndex/confession/confessionDetail"
                  component={ConfessionDetail}
                />
              </Switch>

              {showContent && this.props.history.location.pathname === '/home/schoolIndex/confession/confessionCards' && (
                <div
                  className="createConfession"
                  onClick={() => {
                    this.props.history.push('/home/schoolIndex/confession/createConfession')
                    this.setState({
                      pathname:'/home/schoolIndex/confession/createConfession'
                    })
                  }}
                ></div>
              )}
              {showContent && this.props.history.location.pathname !== '/home/schoolIndex/confession/confessionCards' && (
                <div
                  className="backtowall"
                  onClick={() => {
                    this.props.history.push('/home/schoolIndex/confession/confessionCards')
                    this.setState({
                      pathname:'/home/schoolIndex/confession/confessionCards'
                    })
                  }}
                ></div>
              )}
            </div>
          {/* </div> */}
        </Spin>
      </Suspense>
    )
  }
}
export default withRouter(Confession)
